/*
 * @Description: 头部搜索
 * @Author: buwei.huang
 * @Date: 2019-07-12 13:43:13
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-09-09 13:44:00
 */
<template>
  <title-bar
    :needBorder="false"
    ref="title_bar"
  >
    <div
      class="head_search flex-h flex-vc flex-hsb"
      v-show="isShow"
    >
      <div class="head_search_right flex-h flex-vc">
        <i class="icon fontsize32 iconfont icon-search" />
        <input
          :placeholder="placeholder"
          v-model="searchValue"
        />
        <i
          class="cancelIcon flex-h flex-vc fontsize40 iconfont icon-cancel-o"
          @click="cleanValue"
          v-if="searchValue"
        />
      </div>
    </div>
  </title-bar>
</template>
<script>
import { getUrlParamByKey } from 'vue-xiaobu-utils'
import { TitleBar } from 'vue-xb-ui-depot'
export default {
  components: {
    'title-bar': TitleBar
  },
  data() {
    return {
      searchValue: '',
      placeholder: '',
      isShow: false
    }
  },
  computed: {
    getSearchText() {
      return this.$store.getters.searchText
    }
  },
  watch: {
    searchValue() {
      // 将用户填写的数据存储到vuex中
      this.$store.dispatch('fetchSearchText', this.searchValue)
    },
    getSearchText(val) {
      this.searchValue = val || ''
    }
  },
  mounted() {
    // 为了解决头部css加载缓慢出现拉伸问题
    let timer = setInterval(() => {
      if (this.$refs.title_bar.titleBarHeight) {
        this.$EventBus.$emit('isShow')
        this.isShow = true
        clearInterval(timer)
      }
    }, 100)
    // 获取路由  区分输入提示
    let selectType = getUrlParamByKey('SELECT_TYPE')
    switch (selectType) {
      case 'STARTPOINT': this.placeholder = '请输入出发地'
        break
      case 'ENDPOINT': this.placeholder = '请输入目的地'
        break
      case 'STOPSTATION': this.placeholder = '请输入停靠点'
    }
  },
  methods: {
    // 清除搜索框
    cleanValue() {
      this.searchValue = ''
    }
  }
}
</script>
<style>
.title-bar-wrapper {
  padding-top: 48px;
}
.head_search {
  width: 100%;
  padding: 0 32px 0 112px;
  background-color: #fff;
}
.head_search_right {
  width: 100%;
  height: 72px;
  border-radius: 8px;
  background-color: #f2f5f6;
  font-size: 14px; /* no */
  line-height: 40px;
}
.head_search_right .icon {
  margin: 0 24px 0 40px;
  color: #999999;
}
.head_search_right > input {
  border: none;
  background-color: transparent;
  height: 42px;
  font-size: 15px; /*no*/
  line-height: 42px;
  width: calc(100% - 32px - 64px - 104px);
}
.head_search_right .cancelIcon {
  color: #d8d8d8;
  height: 100%;
  padding: 0 32px;
}
</style>
